	<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Access-Control-Allow-Origin" content="*">
        <!-- <link rel="stylesheet" href="file:///android_asset/ol.css" type="text/css"> -->
        <link type="text/css" rel="stylesheet" href="openlayer/ol.css" >
        <link type="text/css" rel="stylesheet" href="sxkeda/CSS/trackLigh.css">
        <link type="text/css" rel="stylesheet" href="sxkeda/CSS/CircleArrow.css" />
        <link type="text/css" rel="stylesheet" href="sxkeda/js/OverviewMap.css"/>

        <!-- <script type="text/javascript" src="file:///android_asset/jquery-1.8.3.js"></script> -->
        <!-- <script src="file:///android_asset/ol.js" type="text/javascript"></script> -->
        <script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
        <script type="text/javascript" src="openlayer/ol.js" ></script>
        <script type="text/javascript" src="sxkeda/js/testImgRotationAnimation.js"></script>
        <script type="text/javascript" src="sxkeda/js/debug.js"></script>
        <script type="text/javascript" src="sxkeda/js/TrackLights.js"></script>
        <script type="text/javascript" src="sxkeda/js/TrackLight.js"></script>
		<script type="text/javascript" src="sxkeda/js/Popups.js"></script>
		<script type="text/javascript" src="sxkeda/js/Popup.js"></script>
		<script type="text/javascript" src="sxkeda/js/OverviewMap.js"></script>


        <!-- <title>OpenLayers map preview</title> -->
        <style type="text/css">
			html, body, .map {
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
			}
        </style>
    </head>
    <body>
        <div id="wrapper">
            <!-- <div id="location"></div> -->
            <!-- <div id="scale"></div>
            <div id="nodelist">
            <em>Click on the map to get feature info</em>
            </div> -->
        </div>
  
        <div id="map" class="map"></div>
        <!-- <button onclick="get()">获得位置</button> -->

        <script type="text/javascript">
			var pureCoverage = false;
			var arry = new Array();
	

			console.log("Hello World");
			// if this is just a coverage or a group of them, disable a few items,
			// and default to jpeg format
			var format = 'image/png';
			var bounds = [412.29087560646866, -3567.4348720330754, 3823.043098107759, -511.8054809570278];
			var carIndex = 2;
			if (pureCoverage)
			{
				document.getElementById('filterType').disabled = true;
				document.getElementById('filter').disabled = true;
				document.getElementById('antialiasSelector').disabled = true;
				document.getElementById('updateFilterButton').disabled = false;
				document.getElementById('resetFilterButton').disabled = true;
				document.getElementById('jpeg').selected = true;
				format = "image/jpeg";
			}
			/********************************************放置图片*********************************************/

			console.info("load png");
			var iconFeature = new ol.Feature(
			{
				geometry : new ol.geom.Point([152, -148]),
				name : 'Null Island',
				population : 4000,
				rainfall : 500
			});
			var iconFeature1 = new ol.Feature(
			{
				geometry : new ol.geom.Point([152, -148]),
				name : 'Null Island',
				population : 4000,
				rainfall : 500
			});
			var iconStyle = new ol.style.Style(
			{
				image : new ol.style.Icon(/** @type {olx.style.IconOptions} */(
					{
						anchor : [1, 1],
						anchorXUnits : 'pixels',
						anchorYUnits : 'fraction',
						opacity : 10,
						rotateWithView : true,
						scale : 0,
						src : 'sxkeda/resource/icon/icon1.png'
					}))
			});
			var iconStyleNoarrow = new ol.style.Style(
			{
				image : new ol.style.Icon(/** @type {olx.style.IconOptions} */(
					{
						// anchor : [1, 1],
						// anchorXUnits : 'pixels',
						// anchorYUnits : 'fraction',
						// opacity : 10,
						// rotateWithView:true,
						// scale:0.5,
						scale : 0,
						src : 'sxkeda/resource/icon/icon2.png'
					}))
			});
			console.info("iconFeature.setStyle(iconStyle)");
			// iconStyle.getImage().setRotation(45);
			iconFeature.setStyle(iconStyle);
			iconFeature1.setStyle(iconStyleNoarrow);
			var vectorSource = new ol.source.Vector(
			{
				features : [iconFeature, iconFeature1]
			});

			var vectorLayer = new ol.layer.Vector(
			{
				source : vectorSource
			});
			/*****************************************************************************************************/

			var mousePositionControl = new ol.control.MousePosition(
			{
				// className : 'custom-mouse-position',
				// target : document.getElementById('location'),
				// coordinateFormat : ol.coordinate.createStringXY(5),
				// undefinedHTML : '&nbsp;'
			});
			
			var untiled = new ol.layer.Image(
			{
				source : new ol.source.ImageWMS(
				{
					ratio : 1,
					url : 'http://192.168.1.33:8080/geoserver/wms',
					params :
					{
						'FORMAT' : format,
						'VERSION' : '1.1.1',
						STYLES : '',
						LAYERS : 'kdzk_office_map',
					}
				})
			});
			var tiled = new ol.layer.Tile(
			{
				visible : false,
				source : new ol.source.TileWMS(
				{
					url : 'http://192.168.1.33:8080/geoserver/wms',
					params :
					{
						'FORMAT' : format,
						'VERSION' : '1.1.1',
						tiled : true,
						STYLES : '',
						LAYERS : 'kdzk_office_map',
					}
				})
			});
			fillArray();

			var overviewMapControl = new ol.control.OverviewMap({
				// see in overviewmap-custom.html to see the custom CSS used
				className: 'ol-overviewmap ol-custom-overviewmap',
				layers: [
					untiled, tiled
				],

			});




			var projection = new ol.proj.Projection(
			{
				code : 'EPSG:54012',
				units : 'm',
				axisOrientation : 'neu'
			});
			var map = new ol.Map(
			{
				controls : ol.control.defaults(
				{
					attribution : false
				}).extend([/*mousePositionControl, */overviewMapControl]),
				target : 'map',
				layers : [untiled, tiled, vectorLayer],
				// overlays : [overlay1, overlay2, overlay3, overlay4, overlay5, overlay6, overlay7, overlay8, overlay9, overlay10],
				view : new ol.View(
				{
					projection : projection,
					zoom : 17,
					center : [152, -148]
				})
				// view: view
			});

			var trackLights = TrackLights.new(vectorLayer);
			// trackLights.setSchedule(3,1000);
			trackLights.add(2,0,-150);
			trackLights.add(3,0,100);
			trackLights.add(4,0,200);


			trackLights.setSchedule(2,2000);
			trackLights.setSchedule(3,1000);
			trackLights.setSchedule(4,1500);


			// var popup = Popup.new();
			// popup.init(map,12);
			// // popup.addOvelayToMap(map);
			// popup.setPosition(100,100);


			var popups = Popups.new(map);			
			for(var i = 0;i<11;i++)
			{
				popups.add(i,0,0);
			}



			// trackLights.remove(1);

			map.getView().on('change:resolution', function(evt)
			{
				var resolution = evt.target.get('resolution');
				var units = map.getView().getProjection().getUnits();
				var dpi = 25.4 / 0.28;
				var mpu = ol.proj.METERS_PER_UNIT[units];
				var scale = resolution * mpu * 39.37 * dpi;
				
				
				if (scale >= 9500 && scale <= 950000)
				{
					scale = Math.round(scale / 1000) + "K";
				}
				else
				if (scale >= 950000)
				{
					scale = Math.round(scale / 1000000) + "M";
				}
				else
				{
					scale = Math.round(scale);
				}
				moveToPoint(map, true);
				// document.getElementById('scale').innerHTML = "Scale = 1 : " + scale;
			});
			// map.getView().fit(bounds, map.getSize());

			fillArray();
			map.on('singleclick', function(evt)
			{
				// trackLights.remove(4);
				// popup.removeOvelayFromMap();
				// popups.remove(1);
				// trackLights.displayAllTraceLight();
				// moveToPoint(map, true);
				// document.getElementById('nodelist').innerHTML = "Loading... please wait...";
				var view = map.getView();
				var viewResolution = view.getResolution();
				var source = untiled.get('visible') ? untiled.getSource() : tiled.getSource();
				var url = source.getGetFeatureInfoUrl(evt.coordinate, viewResolution, view.getProjection(),
				{
					'INFO_FORMAT' : 'text/html',
					'FEATURE_COUNT' : 50
				});
				if (url)
				{
					// document.getElementById('nodelist').innerHTML = '<iframe seamless src="' + url
					// + '"></iframe>';
				}
			});

			map.on('postcompose', function(event)
			{
				var vectorContext = event.vectorContext;
				var frameState = event.frameState;

				// arry[1].angle = arry[1].angle + 1;
				// if (arry[1].angle > 360)
				// 	arry[1].angle = 0;
				// setIconRoationAngle(vectorContext, arry[1].iconFeature, arry[1].iconStyle, arry[1].angle);

				for (var i = 0; i < 10; i++)
				{
					if (arry[i].resfhCount > 0)
					{
						// console.info(i);
						arry[i].old_x = arry[i].old_x + arry[i].offset_x;
						arry[i].old_y = arry[i].old_y + arry[i].offset_y;
						arry[i].resfhCount--;
						arry[i].iconFeature.setGeometry(new ol.geom.Point([arry[i].old_x, arry[i].old_y]));
						arry[i].iconStyle.getImage().setRotation(arry[i].angle);
						popups.popupArray[i].setPosition(arry[i].old_x,arry[i].old_y);
					}
					vectorContext.drawFeature(arry[i].iconFeature, arry[i].iconStyle);
					// else
					// 	vectorContext.drawFeature(arry[i].iconFeature, arry[i].iconStyleNoarrow);
				}
				map.render();
			});
			map.render();
			/*****************************************************************************************************/
			function get()
			{
				// $('body').append('<scr'+'ipt
				// src="http://192.168.1.33:5000/id_2_position?id=9"></sc'+'ript>');
				ajax.abort();
				//每次提交前, 先放弃上一次ajax的提交, 这样就不会同时有多个ajax正在请求, 卡死浏览器

				ajax = $.ajax(
				{
					url : "http://192.168.1.33:5000/all_position"//请求的url
					,
					async : false,
					dataType : "jsonp"
					//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
					,
					jsonp : "callback"
					//自定义的jsonp回调函数名称"jsonpCallback"，返回的json也必须有这个函数名称
					,
					jsonpCallback : "jsonpCallback"
					// , complete:function( data, textStatus, jqXHR )
					// {
					// console.info(textStatus);
					// if(textStatus == "success")
					// {
					// 	console.info(data);
					// }
					// }
				});

				// carIndex++;
				// if(carIndex>9) carIndex=1;

			}

			function Points(id, x, y)
			{
				this.id = id;
				this.x = 0;
				this.y = 0;
				this.old_x = this.x;
				this.old_y = this.y;
				this.x = x;
				this.y = y;
				this.resfhCount = 20;
				this.iconFeature = new ol.Feature(
				{
					geometry : new ol.geom.Point([152, -178]),
					name : 'iconFeature' + id
				});

				this.iconStyle = new ol.style.Style(
				{
					image : new ol.style.Icon(/** @type {olx.style.IconOptions} */(
						{
							// anchor : [1, 1],
							// anchorXUnits : 'pixels',
							// anchorYUnits : 'fraction',
							// opacity : 10,
							// rotateWithView:true,
							// scale:0.5,
							src : 'sxkeda/resource/icon/icon1.png'
						}))
				});
				this.iconStyleNoarrow = new ol.style.Style(
				{
					image : new ol.style.Icon(/** @type {olx.style.IconOptions} */(
						{
							// anchor : [1, 1],
							// anchorXUnits : 'pixels',
							// anchorYUnits : 'fraction',
							// opacity : 10,
							// rotateWithView:true,
							// scale:0.5,
							src : 'sxkeda/resource/icon/icon2.png'
						}))
				});
				this.offset_x = 0;
				this.offset_y = 0;
				this.angle = 0;
				console.info("addFeature");
				// this.iconFeature.setStyle(this.iconStyle);
				// vectorLayer.getSource().addFeature(this.iconFeature);
			}

			var ajax =
			{
				abort : function()
				{
				} //定义一个空的方法, 是为了下面ajax.abort()不报错
			};
			function fillArray()
			{
				for (var i = 0; i < 10; i++)
					arry.push(new Points(i, 0, 0));
			}

			function jsonpCallback(data)//回调函数
			{
				// console.log(carIndex); //
				var pointx = jQuery.parseJSON(JSON.stringify(data));
				// console.info(pointx.values.length);

				for (var i = 0; i < pointx.values.length; i++)
				{
					// console.info(i+"   x="+pointx.values[i].x+"  y="+pointx.values[i].y);

					// arry[i].Points(i,pointx.values[i].x,pointx.values[i].y);

					arry[i].old_x = arry[i].x;
					arry[i].old_y = arry[i].y;

					arry[i].x = pointx.values[i].x;
					arry[i].y = pointx.values[i].y;
					// console.info("old = "+arry[i].old_x+"  "+arry[i].old_y);
					// console.info("new = "+arry[i].x+"  "+arry[i].y);

					if ((arry[i].old_x != arry[i].x) || (arry[i].old_y != arry[i].y))
					{
						arry[i].offset_x = (arry[i].x - arry[i].old_x) / 20;
						arry[i].offset_y = (arry[i].y - arry[i].old_y) / 20;
						arry[i].resfhCount = 20;
						arry[i].angle = Math.atan2(arry[i].offset_x, arry[i].offset_y);
						console.info("angle = " + (180 / Math.PI) * Math.atan2(arry[i].offset_x, arry[i].offset_y));
						// console.info("offset["+arry[i].offset_x+","+arry[i].offset_y+"]");
					}
					// arry[i].iconStyle.getImage().setRotation(Math.PI/180*90);
				}
				xxxxx = 0;
				// console.info("arry[1] = "+arry[1].old_x+"  "+arry[1].old_y);

				moveToPoint(map, false);

			}

			function moveToPoint(map, refash)
			{
				// if ((arry[1].old_x != arry[1].x) || (arry[1].old_y != arry[1].y) || refash ==
				// true)
				// {
				// var london = [arry[1].x, arry[1].y];
				// console.info("moveToPoint");
				// var pan = ol.animation.pan(
				// {
				// duration : 1000,
				// source : (map.getView().getCenter())
				// });
				// console.info(map.getView().getCenter());
				// map.beforeRender(pan);
				// map.getView().setCenter(london);
				// }
			}

			var t2 = window.setInterval("get()", 1000);

        </script>
    </body>
</html>
